<template>
  <div class="container">
    <div ref="mainSheng" class="mychartSheng"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { requestHFCity } from '@/api/request.js'
import { mapMutations } from "vuex";
// import axios from 'axios'
export default {
  name: 'EchartMapSheng',
  props: {
    shengTitleProp: {
      type: Object,
      default: () => ({}),
      required: false
    },
    shengVisualMapProp: {
      type: Object,
      default: () => ({}),
      required: false
    },
    shengSpecialAreasProp: {
      type: Object,
      default: () => ({}),
      required: false
    },
    shengSeriesNameProp: {
      type: String,
      default: () => 'USA PopEstimates',
      required: false
    },
    shengSeriesMapProp: {
      type: String,
      default: () => 'USA',
      required: false
    },
    shengSeriesMapZoomProp: {
      type: Number,
      default: () => 1,
      required: false
    },
    seriesMapTopProp: {
      type: String,
      default: () => '50%',
      required: false
    },
    shengBaseMapProp: {
      type: Object,
      default: () => {},
      required: false
    },
    shengSeriesDataProp: {
      type: Array,
      default: () => [],
      required: false
    },
    shengMapUrlProp: {
      type: String,
      default: () => '',
      required: false
    },
    shengShowVisualMap: {
      type: Boolean,
      default: () => false,
      required: false
    },
    shengMapBgColorProp: {
      type: String,
      default: () => 'rgba(0,0,0,0)',
      required: false
    },
    shengMapBgEmColorProp: {
      type: String,
      default: () => 'rgba(0,0,0,0)',
      required: false
    },
    showCities: {
      type: Array,
      default: () => [],
      required: false
    }
  },
  data() {
    return {
      hefengKey: 'a981619d96b54e83a1425eff4e342267',
      myChart: {},
      option: {
        title: this.shengTitleProp,
        animationDuration: 0,
        geo: {
          map: this.shengSeriesMapProp,
          roam: false,
          zoom: this.shengSeriesMapZoomProp,
          show: true,
          itemStyle: {
            areaColor: this.shengMapBgColorProp,
            borderWidth: 1,
            borderColor: 'rgba(34,93,165,1)'
          },
          silent: true,//禁用地图hover事件
          tooltip: {
            show: false
          },
          emphasis:{
            itemStyle: {
              areaColor: this.shengMapBgEmColorProp,
              borderWidth: 1,
              borderColor: 'rgba(34,93,165,1)'
            }
          },
          regions: [
            {
              name: this.$store.state.highlightShengCityNameNow,
              itemStyle: {
                normal:{
                  areaColor: this.shengMapBgEmColorProp,
                  borderWidth: 1,
                  borderColor: 'rgba(34,93,165,1)'
                }
              }
            }
          ],
          zlevel: 3
        },
        tooltip: {
          trigger: 'item',
          showDelay: 0,
          transitionDuration: 0.2
        },
        // visualMap: this.visualMapProp,
        toolbox: {
          show: false,
          //orient: 'vertical',
          left: 'left',
          top: 'top',
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        series: [
          {
            name: this.shengSeriesNameProp,
            type: 'map',
            roam: false,
            map: this.shengSeriesMapProp,
            zoom: this.shengSeriesMapZoomProp,
            // top: this.seriesMapTopProp,
            silent: true,//禁用地图hover事件
            // selectedMode: false,//禁用地图点击事件
            emphasis: {
              label: {
                show: false
              },
              tooltip: {
                show: false
              }
            },
            z: 2,
            zlevel: 2,
            data: this.shengSeriesDataProp,
            animationDuration: 0
          },
        ]
      },
      centers:[],
      centersData:[],
      highlightScatterOld: 0,
      highlightScatterNow: 1,
      highlightShengCityNameOld: '',
      highlightShengCityNameNow: this.$store.state.highlightShengCityNameNow
    }
  },
  mounted() {
    this.initChart();
    this.myChart.on('georoam', (params) => {
      let myOption = this.myChart.getOption();
      if (params.zoom != null && params.zoom != undefined) { //捕捉到缩放时
        myOption.series[0].zoom = myOption.geo[0].zoom;//myChart的缩放等级跟着上层的geo一起改变
        myOption.series[0].center = myOption.geo[0].center;//myChart的中心位置随着上层geo一起改变
      } else {//捕捉到拖曳时
        myOption.series[0].center = myOption.geo[0].center;//myChart的中心位置随着上层geo一起改变
      }
      this.myChart.setOption(myOption);//设置option
    });
    this.myChart.on('click',(params)=>{
      console.log("highlightScatterNow",this.highlightScatterNow);
      if (params.componentSubType=='scatter') {
        // 必须通过setProIdStore修改store中的provinceId，才能改变页面上的数据显示
        this.setProIdStore(params.value[4]);
        this.sethighlightShengCityNameStore(params.value[2]);
        this.setProCityId(params.value[4]);
        this.setProCityIdName(params.value[2])
        // 调用和风天气接口获取城市id
        this.getCityNo(params.value[2]);
        this.highlightScatterOld = this.highlightScatterNow;
        this.highlightScatterNow = params.dataIndex;
        this.myChart.dispatchAction({
          type:'downplay',
          dataIndex:this.highlightScatterOld
        });
        this.myChart.dispatchAction({
          type:'highlight',
          dataIndex:this.highlightScatterNow
        });
        let myOption = this.myChart.getOption();
        // myOption.geo[0].regions.forEach((ele)=>{
        //   if (ele.name==this.$store.state.highlightShengCityNameNow) {
        //     this.option.geo.regions[0].name = this.$store.state.highlightShengCityNameNow;
        //   }
        // });
        myOption.geo[0].regions.forEach((ele)=>{
          if (ele.name==this.$store.state.highlightShengCityNameNow) {
            this.option.geo.regions[0].name = this.$store.state.highlightShengCityNameNow;
          }
        });
        // this.initChart();
      }else{
        console.log(params.name);
        
      }
    });
  },
  methods: {
    ...mapMutations(['setProIdStore','sethighlightShengCityNameStore','setHFCityNoStore','setProCityId','setProCityIdName']),
    initChart() {
      this.myChart = echarts.init(this.$refs.mainSheng,null,{renderer:'svg'});
      if (this.shengShowVisualMap==true) {
        this.option.visualMap = this.shengVisualMapProp;
      }
      echarts.registerMap(this.shengSeriesMapProp, this.shengBaseMapProp, this.shengSpecialAreasProp);
      this.myChart.setOption(this.option);
      this.myChart.dispatchAction({
        type:'highlight',
        dataIndex:this.highlightScatterNow
      })
    },
    genScatters(sdata){
      let mapZoom = parseFloat(this.$store.state.htmlScale);
      let baseFontSize = 12;
      let labelFontSize = baseFontSize*mapZoom;
      let cityData = [];
      let centersData = [
        [0,0,'',0]
      ];
      sdata.forEach((item,index) => {
        if (this.showCities.indexOf(item.properties.name)!=-1) {
          // centersData.push(item.properties.centroid,)
          centersData.push([item.properties.centroid[0],item.properties.centroid[1],this.shengSeriesDataProp[index].name,this.shengSeriesDataProp[index].value,item.properties.adcode]);
        }
      });
      this.shengSeriesDataProp.forEach(item => {
        if (this.showCities.indexOf(item.name)!=-1) {
          cityData.push([item.name, item.value])
        }
      });
      this.option.series.push({
        type: 'scatter',
        coordinateSystem: 'geo',
        symbolSize: function () {
          return  10*mapZoom;
        },
        color: '#ffff00',
        tooltip: {
          formatter: function (params) {
            return params.data[2]+'：'+params.data[3];
          }
        },
        label: {
          show: true,
          color: '#ffffff',
          fontSize:labelFontSize,
          fontWeight: 'bold',
          position: 'right',
          formatter: function (params) {
            return params.data[2];
          }
        },
        emphasis:{
          itemStyle:{
            color: '#f89b06',
          },
          label:{
            color: '#ffff00',
          }
        },
        labelLine: {
          show: false
        },
        animationDuration: 0,
        z: 6,
        zlevel: 6,
        data: centersData
      });
    },
    getCityNo(province) {
      requestHFCity({
        url: '/city/lookup?location='+province+'&key='+this.hefengKey,
        method: 'get'
      }).then(res => {
        console.log("城市id",res.data.location[0].id);
        this.setHFCityNoStore(res.data.location[0].id);
      });
    }
  },
  computed:{
  },
  watch: {
    showCities: {
      handler() {
        this.$nextTick(() => {
          this.initChart();
          this.genScatters(this.shengBaseMapProp.features);
        })
      },
      deep: true,
      immediate: true
    },
    shengSeriesDataProp: {
      handler() {
        this.$nextTick(() => {
          this.initChart();
        })
      },
      deep: true,
      immediate: true
    },
    shengBaseMapProp: {
      handler() {
        this.$nextTick(() => {
          this.initChart();
          this.genScatters(this.shengBaseMapProp.features);
        })
      },
      deep: true,
      immediate: true
    },
    option: {
      handler() {
        // this.option1.series[0].data = newVal
        // this.wsData = newVal
        this.$nextTick(() => {
          this.initChart();
        })
      },
      deep: true,
      immediate: true
    },
    '$store.state': {
      deep: true,
      immediate: false,
      handler() {
        this.$nextTick(()=>{
          if (this.$store.state.colors) {
            this.option.geo.itemStyle.areaColor = this.$store.state.colors.mapBgColor;
            this.option.geo.emphasis.itemStyle.areaColor = this.$store.state.colors.mapBgEmColor;
            this.option.geo.itemStyle.borderColor = this.$store.state.colors.mapBorderColor;
            this.option.series[1].label.color = this.$store.state.colors.mapScatterTextColor;
            this.option.series[1].emphasis.itemStyle.color = this.$store.state.colors.mapScatterEmColor;
            this.option.series[1].emphasis.label.color = this.$store.state.colors.mapScatterEmTextColor;
          }
          
          this.option.geo.regions.name = this.$store.state.highlightShengCityNameNow;
          this.initChart();
          this.genScatters(this.shengBaseMapProp.features);
        })
      }
    },
  },
}
</script>
<style lang="less" scoped>
.container{
  width: 36vw;
  height: 54vh;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  .mychartSheng {
    width: 36vw;
    height: 54vh;
    box-sizing: border-box;
    overflow: hidden;
    background-color: transparent;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    border: 0rem solid blue;
  }
}

</style>